<template>
<div>
  <div class="top"  v-if="isTopShow">
    <div class="invoiceBtn fixedTop fixedTopBg" v-if="isExitDriver">
      <div class="textInfo"></div>
      <div>
        <el-button class="btnNo btns">取消</el-button>
        <el-button class="btnAc btns" @click="addDrivers">确定</el-button>
      </div>
    </div>
    <div class="invoiceBtn fixedTop fixedTopBg" v-else>
        <div class="textInfo">
          <div class="fixedInfo">
            <span>身份证号：{{driversData.identification}}</span>
            <span>姓名：{{driversData.name}}</span>
          </div>
          <div class="fixedInfo">
            <p v-if="isBackResult"><i>[驳回理由]：</i>{{backResult}}123</p>
          </div>
        </div>
        <div v-if="isCloseBtn">
          <el-button class="btnAc" @click="closePage">关闭</el-button>
        </div>
        <div v-if="saveBtn">
          <el-button class="btnNo btns"  @click="removeFrom">取消</el-button>
          <el-button class="btnAc btnLange" @click="editDrivers">{{btnText}}</el-button>
        </div>   
    </div>
  </div>
     <div class="showFixed firstBox" v-if="isShareDriver">
      <div class="invoiceBtn fixedTop fixedTopBg">
        <div></div>
        <div>
          <el-button class="btnAc btns"  @click="closePage">关闭</el-button>
        </div>
      </div>
      <div class="detailMain" style="margin-top:72px;">
          <el-card :body-style="{ padding: '0' }">
            <div class="cardHead">
              <h3>司机基础信息</h3>
            </div>
            <div class="padd73 reviewInfo">
              <p class="tip">*提示：{{watchTip}}</p>
              <p class="text"><span>身份证号:{{driversData.identification}}</span><i>{{watchBtn}}</i></p>
              <p class="text"><span>姓名:{{driversData.name}}</span></p>
            </div>
          </el-card>
      </div>
  </div>

  <el-form :model="driversData" v-else :rules="driverRules" ref="driverRef" :disabled="isDisabled">
    <div class="showFixed" v-if="isExitDriver">
      
      <div class="detailMain" style="margin-top:72px;">
          <el-card :body-style="{ padding: '0' }">
            <div class="cardHead">
              <h3>司机基础信息</h3>
            </div>
            <div class="padd73">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="身份证号" label-width="122px" ref="codeRef" prop="identification">
                    <el-input placeholder="请输入身份证号" v-model="driversData.identification"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" label-width="122px" prop="name">
                    <el-input placeholder="请输入姓名" v-model="driversData.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
      </div>
    </div>
    
    <div class="detailWrap showFixed"  v-if="formShow" >
      
      <div class="detailMain">
        <div>
          <el-card :body-style="{ padding: '0' }" :style="{marginTop:marginTop}">
          <div class="cardHead">
            <h3>司机基础信息</h3>
          </div>
          <div class="padd73">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="身份证号" label-width="122px" prop="identification">
                  <el-input placeholder="请输入身份证号" v-model="driversData.identification" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" label-width="122px" prop="name">
                  <el-input placeholder="请输入姓名" v-model="driversData.name" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="本人实名手机号" label-width="122px" prop="mobile">
                  <el-input placeholder="请输入本人实名手机号" v-model="driversData.mobile"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                
                <el-form-item label="常用车辆" label-width="122px" prop="truck_id">
                  <el-select  placeholder="请选择常用车辆" v-model="driversData.truck_id" v-el-select-loadmore="loadMore">
                  <el-option
                      v-for="item in truckList"
                      :key="item.id"
                      :label="item.header_license_vo.licence"
                      :value="item.id">
                    </el-option>
                </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- 司机收款信息 -->
        <el-card :body-style="{ padding: '0' }">
          <div class="cardHead">
            <h3>司机收款信息</h3>
          </div>
          <div class="padd73">
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-form-item label="银行卡号" label-width="79px" prop="driver_bank.card_number">
                  <el-input placeholder="请输入司机本人银行卡号" v-model="driversData.driver_bank.card_number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="所属银行" label-width="79px" prop="driver_bank.name">
                  <el-input placeholder="请输入银行卡号所属银行" v-model="driversData.driver_bank.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行预留手机号" label-width="122px" prop="driver_bank.mobile">
                  <el-input placeholder="请输入银行预留手机号" v-model="driversData.driver_bank.mobile"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        </div>
        <!-- 司机基础信息 -->
        

        <!-- 司机证件信息 -->
        <el-card :body-style="{ padding: '0' }" v-if="isShareInfo">
          <div class="cardHead">
            <h3>司机证件信息</h3>
          </div>
          <p class="titlebox"><span><i>身份证</i></span></p>
          <div class="padd12"> 
            <el-row :gutter="20">
                <el-col :span="14" :offset="0">
                <el-form-item label="民族" label-width="108px" prop="nation">
                  <el-select  placeholder="请选择民族" v-model="driversData.nation"  @change="$forceUpdate()">
                  <el-option
                      v-for="item in nationType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="14" :offset="0">
                <el-form-item label="住址" label-width="108px" prop="" style="margin-bottom:8px">
                  <el-cascader :placeholder="defaultarea" :class="{haveData:initValue}" ref="regLabel" :options="areaData"  v-model.trim="driversData.region_id" :props="areaProps" @change="areaChange"></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="14" :offset="0">
                <el-form-item label="" label-width="108px" prop="identification_address">
                  <el-input placeholder="请填写身份证上的详细住址信息" v-model="driversData.identification_address" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="14" :offset="0">
                <div class="radioDate">
                  <el-form-item  label="身份证有效期" label-width="108px" prop="identification_status">
                    <div class="radiolist">
                      <el-radio-group v-model="driversData.identification_status" @change="changeData" text-color="#ff0000" style="width:72px;">
                        <el-radio label="SHORT">短期</el-radio>
                        <el-radio  label="LONG">长期</el-radio>
                      </el-radio-group>
                    </div>
                  </el-form-item>
                  <el-form-item style="margin-top:38px"
                  prop="identification_start_time" 
                  v-show="driversData.identification_status == 'LONG'" 
                  :rules="{required:driversData.identification_status!='LONG'? false:true,message:'请选择身份证开始时间'}">
                   <el-date-picker
                    v-model="driversData.identification_start_time"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择身份证开始时间">
                  </el-date-picker>
                  </el-form-item>
                  
                  <el-form-item  
                  prop="codeDate" 
                  v-show="driversData.identification_status == 'SHORT'" 
                  :rules="{required:driversData.identification_status!='SHORT'? false:true,message:'请选择身份证期限'}">
                    <el-date-picker
                      
                      type="daterange"
                      align='right'
                      @change="identChange"
                      v-model="driversData.codeDate"
                      value-format="yyyy-MM-dd"
                      range-separator="→"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="身份证正面" label-width="108px" prop="identification_front_pic">
                  <div class="uploadBox"
                  :class="{disabled:isDisabled}"
                    v-loading="imgLoading.imgLoadingOne"
                    element-loading-text="正在上传中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)">
                    <input
                      type="file"
                      ref="inputOneRef"

                      :disabled="isDisabled"
                      @change="getImgOne($event)"
                      name="file"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desOneImg"><span @click="previewOne">预览</span><span @click="editImgOne">修改</span></div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgOneUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desOneImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传身份证正面</h3>
                      <span>支持jpg/png格式</span>
                      <span>RGB模式，不超过10M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogOne">
                      <img width="100%" :src="dialogUrl.dialogOneUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="身份证反面" label-width="108px" prop="identification_back_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputTwoRef"
                      :disabled="isDisabled"
                      @change="getImgTwo($event)"
                      name="file"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desTwoImg">
                      <span @click="previewTwo">预览</span><span @click="editImgTwo">修改</span>
                      </div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgTwoUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desTwoImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传身份证反面</h3>
                      <span>支持jpg/png格式</span>
                      <span>RGB模式，不超过10M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogTwo">
                      <img width="100%" :src="dialogUrl.dialogTwoUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>

            </el-row>
          </div>
          <!-- 驾驶证信息 -->
            <p class="titlebox"><span><i>驾驶证</i></span></p>
          <div class="padd12"> 
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="发证机关" label-width="108px" prop="driver_license.authority">
                  <el-input placeholder="请输入发证机关" v-model="driversData.driver_license.authority"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="准驾车型" label-width="108px" prop="driver_license,type">
                <el-select  placeholder="请选择准驾车型" v-model="driversData.driver_license.type">
                  <el-option
                      v-for="item in driverType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
          
            <el-row :gutter="20">
              <el-col :span="14" :offset="0">
                <div class="radioDate">
                  <el-form-item  label="驾驶证有效期" label-width="108px" prop="driver_license.driver_alidity_vo.value">
                    <div class="radiolist">
                      <el-radio-group v-model="driversData.driver_license.driver_alidity_vo.value" @change="jiaDataChange" style="width:72px;">
                        <el-radio label="SHORT">短期</el-radio>
                        <el-radio  label="LONG">长期</el-radio>
                      </el-radio-group>
                    </div>
                  </el-form-item>
                  <el-form-item  
                prop="driver_license.start_time" 
                v-show="driversData.driver_license.driver_alidity_vo.value == 'LONG'"
                :rules="{required:driversData.driver_license.driver_alidity_vo.value!='LONG'? false:true,message:'请选择驾驶证开始时间'}"
                >
                   <el-date-picker style="margin-top:38px"
                    v-model="driversData.driver_license.start_time"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择驾驶证开始时间">
                  </el-date-picker>
                  </el-form-item>

                <el-form-item  
                prop="jiaDate" 
                v-show="driversData.driver_license.driver_alidity_vo.value == 'SHORT'"
                :rules="{required:driversData.driver_license.driver_alidity_vo.value!='SHORT'? false:true,message:'请选择驾驶证期限'}"
                >
                  <el-date-picker
                    v-model="driversData.jiaDate"
                    type="daterange"
                    @change="licenseChange"
                    align='right'
                    value-format="yyyy-MM-dd"
                    range-separator="→"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间">
                  </el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="驾驶证主页" label-width="108px" prop="driver_license.front_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}" >
                    <input
                      type="file"
                      :disabled="isDisabled"
                      ref="inputThreeRef"
                      @change="getImgThree($event)"
                      name="file"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desThreeImg"><span @click="previewThree">预览</span><span @click="editImgThree">修改</span></div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgThreeUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desThreeImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传驾驶证主页</h3>
                      <span>支持jpg/png格式</span>
                      <span>RGB模式，不超过10M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogThree">
                      <img width="100%" :src="dialogUrl.dialogThreeUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="驾驶证副页" label-width="108px" prop="driver_license.subpage_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      :disabled="isDisabled"
                      type="file"
                      ref="inputFourRef"
                      @change="getImgFour($event)"
                      name="file"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desFourImg">
                      <span @click="previewFour">预览</span><span @click="editImgFour">修改</span>
                      </div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgFourUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desFourImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传驾驶证副页</h3>
                      <span>支持jpg/png格式</span>
                      <span>RGB模式，不超过10M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogFour">
                      <img width="100%" :src="dialogUrl.dialogFourUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
              
            </el-row>
          </div>
          <!-- 从业资格证信息 -->
            <p class="titlebox"><span><i>从业资格证</i></span></p>
          <div class="padd12"> 
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="从业资格证号" label-width="108px" prop="">
                <el-input placeholder="请输入从业资格证号" v-model="driversData.driver_qualification.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="从业资格证有效期" label-width="142px" prop="driver_qualification.end_time">
                <el-date-picker
                  v-model="driversData.driver_qualification.end_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择从业资格证有效截止期">
                </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                <el-form-item label="从业资格证" label-width="108px" prop="driver_qualification.pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputFiveRef"
                      :disabled="isDisabled"
                      @change="getImgFive($event)"
                      name="file"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desFiveImg"><span @click="previewFive">预览</span><span @click="editImgFive">修改</span></div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgFiveUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desFiveImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传从业资格证</h3>
                      <span>支持jpg/png格式</span>
                      <span>RGB模式，不超过10M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogFive">
                      <img width="100%" :src="dialogUrl.dialogFiveUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                
              </el-col>
              
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
  </el-form>
</div>
</template>

<script>
import merge from 'deepmerge'
import {driverRules} from '@t/driverRules.js'
import {driverType,nationType} from '@t/trucksType.js'
import loginApi from '@/api/loginApi.js';
export default {
  components: {},
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', () => {
          const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight
          if (condition) {
            binding.value()
          }
        })
      },
    },
  },
  data () {
    return {
      marginTop:'72px',
      driverId:'',
      areaData:[],
      areaProps:{    //注册地址
        lazy: true,
          lazyLoad (node, resolve) {
            const level = node.level;
            const resData = {}
            if(level === 0){
              resData.pid=0
              resData.level=1
            }
            if(level === 1){
              resData.pid=node.value
              resData.level=2
            }
            if(level === 2){
              resData.pid=node.value
              resData.level=3
            }
            loginApi.getArea(resData)
            .then(res => {
              const data=res.data
              data.forEach(item => {
                item.value=item.id
                item.label=item.name
                item.leaf = level >= 2
              });
              resolve(res.data)
            })
          }
      },
      defaultarea:'请选择省市区',    //省市区
      initValue:false,     //省市区placeholder
      btnText:'保存',
      id:'',      //司机id
      driverStatus:'',    
      isExitDriver:true,  //判断司机是否存在
      driverRules:driverRules,     //表单验证规则
      driverType:driverType,      //司机准驾车型
      nationType:nationType,      //民族
      driversData:{    //司机信息
        identification:'',    //身份证号
        name:'',     //司机姓名
        mobile:'',        // 本人实名手机号
        driver_bank:{
          card_number:'',     //银行卡号
          mobile:'',         //银行预留手机号
          name:'',         //所属银行
        },
        nation:'',        //民族
        driver_alidity_vo:{
          value:'',    //身份证状态
        },
        jiaDate:[],    //驾驶证日期时间数组
        codeDate:[],    //身份证日期时间数组
        identification_end_time:'',    //起始时间
        identification_start_time:'',    //起始时间
        identification_status:'SHORT',        //身份证状态
        identification_front_pic:'',    //身份证正面图片
        identification_back_pic:'',    //身份证反面图片
        region_id:'',              //三级省市区id
        region_info:'',      //三级省市区中文地址
        province:'',
        county:'',
        city:'',
        identification_address:'',    //身份证详细信息地址
        truck_id:'',                      //常用车辆
        driver_license:{             //驾驶证
          end_time:'',    //驾驶证结束时间
          start_time:'',       //驾驶证开始时间
          front_pic:'',     //驾驶证主页图片
          subpage_pic:'',     //驾驶证副页图片
          type:'',           //驾驶证准驾车型
          authority:'',       //驾驶证发证机关
          driver_alidity_vo:{
            value:'SHORT'
          }
        },
        status:'',      //司机状态

        driver_qualification:{      //资格证
          code:'',        //资格证编号
          end_time:'',      //资格证有效期结束时间
          pic:'',        //资格证图片
        },
        status_vo:{   //司机状态
          value:''
        }
      },
     
      imgUpload:{
        imgOneUrl:'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
        imgTwoUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
        imgThreeUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
        imgFourUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
        imgFiveUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
      },
      desImg:{
        desOneImg:true,
        desTwoImg:true,
        desThreeImg:true,
        desFourImg:true,
        desFiveImg:true
      },
      dialogShow:{
        dialogOne:false,
        dialogTwo:false,
        dialogThree:false,
        dialogFour:false,
        dialogFive:false
      },
      dialogUrl:{
        dialogOneUrl:'',
        dialogTwoUrl:'',
        dialogThreeUrl:'',
        dialogFourUrl:'',
        dialogFiveUrl:''
      },
      imgLoading:{
        imgLoadingOne:false,
        imgLoadingTwo:false,
        imgLoadingThree:false,
        imgLoadingfour:false,
        imgLoadingfive:false,
      },
      truckList:[],     //获取车辆列表
      formData: {
        status:'VERIFY_SUCCESS',
        page: 1,
        per_page: 10,
      },
      acLoadMore:true,
      isDisabled: false,     //司机数据是否可编辑
      isShareDriver: false,     //司机共享数据中
      isShareInfo: false,     //司机查看可共享数据
      isCloseBtn:false,      //是否显示关闭按钮
      formShow:false,
      saveBtn:false,
      isTopShow:false,
      isBackResult:false,
      backResult:'',
      watchTip:'该司机数据已在网络货运平台存在，审核失败，请耐心等待',
      watchBtn:'已有数据共享中',
    };
  },
  created () {
    this.getTrucks()
    if(this.$route.params.type || sessionStorage.getItem('lookType') ){
      this.$store.commit('lookType', sessionStorage.getItem('lookType'));
    }
    if(this.$route.params.id || sessionStorage.getItem('driverId') ){
      this.$store.commit('setDriverId', sessionStorage.getItem('driverId'));
      this.id=sessionStorage.getItem('driverId')
      this.isExitDriver=false
      this.getDriversInfo()
    }else{
      this.isTopShow=true
    }
  },
  watch: {
    
  },
  methods: {
    //新增司机
     addDrivers(){
      const data=this.driversData
      let isError = 0;
      this.$refs.driverRef.validateField(['identification','name'], (Error) => {
          if (Error) {
             isError=1
             this.$message.warning("请填写信息后进行下一步")
          }
      });
      if(isError === 0){
        const loading=this.$loading({
            lock: true,
            text: '正在查询中...',
            spinner: 'el-icon-loading',
        })
        this.$http.companyApi.addDrivers(data).then(res => {
          console.log(res.data);
           this.id=res.data.id
           this.driversData.status=res.data.value
            loading.close()
            console.log(10002);
          if(res.data.belong == "INPUT"){
            this.isTopShow = true
            this.isExitDriver = false
            this.isCloseBtn = false
            this.saveBtn = true
            this.formShow = true
            this.isShareInfo = true
            this.btnText ="确认新增"
            console.log(11111111);
          }else if(res.data.belong == "PUBLIC_DETAIL"){
            this.isTopShow = true
            this.isExitDriver = false
            this.isCloseBtn = true
            this.saveBtn = false
            this.formShow = true
            this.isShareInfo = false
            this.isDisabled = true
            console.log(44444);
            this.getDriversInfo()
          }else if(res.data.belong == "REASON"){
            this.isTopShow = false
            this.isShareDriver = true
            console.log(888888);
          }
        })
        .catch(err => {
          if(err.status == 400){
            loading.close()
            this.$message.warning(err.data.err_msg)
          }
        })
      }
    },
    //获取车辆列表
    getTrucks(){
      this.$http.companyApi.truckeList(this.formData).then(res => {
        if(res.status == 200){
          if(res.data.result){
            const data=this.truckList.concat(res.data.result)
            this.truckList=data
          }else{
            this.acLoadMore=false
          }
        }
      })
    },

    loadMore() {
      this.formData.page = this.formData.page + 1;
      if(this.acLoadMore){
        this.getTrucks(this.formData);
      }
    },

    closePage(){
      this.$router.go(-1)
    },
    //修改司机信息
    editDrivers(){
      const data=this.driversData
      console.log(data);
      this.$refs.driverRef.validate((valid) => {
        if (valid) {
          const loading=this.$loading({
            lock: true,
            text: '信息提交中...',
            spinner: 'el-icon-loading',
          })
          this.$http.companyApi.editDrivers(data,this.id).then(res => {
            if(res.status == 200){
              loading.close()
              this.$message.success("提交成功")
              this.$router.push('/driver')
            }
          }).catch(err => {
            loading.close()
            this.$message.error("信息提交失败,请重新提交")
          })
        }else{
          this.$message.warning("请完整填写表单信息")
        }
      });
    },
    //取消按钮
    removeFrom(){
      const oldVal=sessionStorage.getItem("driverInfo")
      if(oldVal == JSON.stringify(this.driversData)){
        this.$router.go(-1);//返回上一层
        sessionStorage.removeItem("driverInfo")
      }else{
        this.$confirm('点击确认按钮后，已填写内容将被清空，是否继续该操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.removeItem("driverInfo")
          this.$router.go(-1);//返回上一层
        })
      }

    },
    //驾驶证日期长短期
    jiaDataChange(val){
      if(val == 'LONG'){
        this.driversData.driver_license.start_time = ''
      }else{
        this.driversData.jiaDate = []
      }
    },
    //获取司机信息
    getDriversInfo(){
      const loading=this.$loading({
        lock: true,
        text: '正在获取信息...',
        spinner: 'el-icon-loading',
      })
       this.$http.companyApi.driversInfo(this.id).then(res => {
         console.log(res);
        if(res.status==200){
          console.log(res);
           const data = merge(this.driversData, res.data)
          this.driversData=data

          if(this.$store.state.lookType && this.$store.state.lookType =='drivers' || sessionStorage.getItem('lookType') && sessionStorage.getItem('lookType')=='drivers'){
            this.isExitDriver =  false
            this.isCloseBtn = true
            this.saveBtn = false
            this.isDisabled = true
            if(res.data.status_vo.belong == 'INPUT' || res.data.status_vo.belong == 'PRIVATE_DETAIL' ){
              this.isTopShow = true
              this.isShareDriver = false
              this.formShow = true
              this.isShareInfo = true
            }else if(res.data.status_vo.belong == 'PUBLIC_DETAIL'){
              this.isTopShow = true
              this.isShareDriver = false
              this.formShow = true
              this.isShareInfo = false
              console.log(33333333);
            }else if(res.data.status_vo.belong == 'REASON'){
              this.isTopShow = false
              this.isShareDriver = true
            }
            loading.close()
          }else{
            loading.close()
            this.isExitTrucks = false
            if(res.data.status_vo.belong == 'PRIVATE_DETAIL'){
              this.isTopShow = true
              this.isShareDriver = false
              this.isShareInfo = true
              this.isExitDriver = false
              this.formShow = true
               console.log(6666);
              // this.allInfo = true
              if(res.data.status_vo.value == 'NO_SUBMIT'){
                sessionStorage.setItem('driverInfo',JSON.stringify(this.driversData))
                this.isCloseBtn = false
                this.saveBtn = true
                this.btnText = "保存"
                console.log(4444);
              }else if(res.data.status_vo.value == 'APPROVE_FAIL'){
                this.isBackResult=true
                this.backResult=res.data.remarks
                sessionStorage.setItem('driverInfo',JSON.stringify(this.driversData))
                this.isCloseBtn = false
                this.saveBtn = true
                this.btnText = "保存"
                console.log(12);
              }else{
                this.isCloseBtn = false
                this.saveBtn = true
                this.isDisabled = true
                console.log(11222);
              }
             
            }else if(res.data.status_vo.belong == 'PUBLIC_DETAIL'){
              this.isTopShow = true
              this.isExitDriver = false
              this.isCloseBtn = true
              this.saveBtn = false
              this.formShow = true
              this.isDisabled = true
              this.isShareInfo = false
            
            }else if(res.data.status_vo.belong == 'REASON'){
              this.isTopShow = false
              this.isShareDriver = true
              this.formShow = false
            }
          }
      
          
          this.driversData.nation=res.data.driver_nation_vo.value
          this.driversData.identification_status=res.data.driver_alidity_vo.value
          this.driversData.status=res.data.status_vo.value

          if(res.data.identification_front_pic && res.data.identification_front_pic!=''){
            this.imgUpload.imgOneUrl = res.data.identification_front_pic
            this.desImg.desOneImg = false
          }
          if(res.data.identification_back_pic && res.data.identification_back_pic!=''){
            this.imgUpload.imgTwoUrl = res.data.identification_back_pic
            this.desImg.desTwoImg = false
          }
          if(res.data.driver_license.front_pic && res.data.driver_license.front_pic!=''){
            this.imgUpload.imgThreeUrl = res.data.driver_license.front_pic
            this.desImg.desThreeImg = false
          }
          if(res.data.driver_license.subpage_pic && res.data.driver_license.subpage_pic!=''){
            this.imgUpload.imgFourUrl = res.data.driver_license.subpage_pic
            this.desImg.desFourImg = false
          }
          if(res.data.driver_qualification.pic && res.data.driver_qualification.pic!=''){
            this.imgUpload.imgFiveUrl = res.data.driver_qualification.pic
            this.desImg.desFiveImg = false
          }

          const timeArr=[]
          timeArr[0]=res.data.identification_start_time
          timeArr[1]=res.data.identification_end_time
          this.driversData.codeDate=timeArr

          const jiaArr=[]
          jiaArr[0]=res.data.driver_license.start_time
          jiaArr[1]=res.data.driver_license.end_time
          this.driversData.jiaDate=jiaArr

          if(res.data.province!=""){
            this.defaultarea=res.data.province+' / '+res.data.city+' / '+res.data.county
            this.initValue=true
          }
          }
        })
       .catch(err => {
         
       })
    },
    //司机地址
    areaChange(value){
        console.log(value);
      if(value){
        console.log(value);
        let labelData=this.$refs['regLabel'].getCheckedNodes()[0].pathLabels
        // this.driversData.region_info=labelData.join(' / ')
        this.driversData.region_id=value.join()
        this.driversData.province=labelData[0]
        this.driversData.city=labelData[1]
        this.driversData.county=labelData[2]
      }
    },
    // 身份证日期赋值、
    identChange(val){
      console.log(val);
      if(val!=null){
        this.driversData.identification_start_time=val[0]
        this.driversData.identification_end_time=val[1]
      }
      
    },
    // 驾驶证日期赋值
    licenseChange(val){
      if(val!=null){
        this.driversData.driver_license.start_time=val[0]
        this.driversData.driver_license.end_time=val[1]
      }
    },
    //改变身份证状态
    changeData(val){
      this.$forceUpdate();
      this.driversData.driver_alidity_vo.value=this.driversData.identification_status
      if(val == 'LONG'){
        this.driversData.identification_start_time = ''
      }else{
        this.driversData.codeDate = []
      }
      
    },
    // 上传身份证正面预览
    previewOne() {
      this.dialogShow.dialogOne=true
      this.dialogUrl.dialogOneUrl=this.imgUpload.imgOneUrl
    },
    // 上传身份证反面预览
    previewTwo() {
      this.dialogShow.dialogTwo=true
      this.dialogUrl.dialogTwoUrl=this.imgUpload.imgTwoUrl
    },
    // 上传驾驶证主页预览
    previewThree() {
      this.dialogShow.dialogThree=true
      this.dialogUrl.dialogThreeUrl=this.imgUpload.imgThreeUrl
    },
    // 上传驾驶证副页预览
    previewFour() {
      this.dialogShow.dialogFour=true
      this.dialogUrl.dialogFourUrl=this.imgUpload.imgFourUrl
    },
    // 上传从业资格证预览
    previewFive() {
      this.dialogShow.dialogFive=true
      this.dialogUrl.dialogFiveUrl=this.imgUpload.imgFiveUrl
    },

    //上传身份证正面修改
    editImgOne(){
      this.$refs.inputOneRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传身份证反面修改
    editImgTwo(){
      this.$refs.inputTwoRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传驾驶证主页修改
    editImgThree(){
      this.$refs.inputThreeRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传驾驶证副页修改
    editImgFour(){
      this.$refs.inputFourRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传从业资格证修改
    editImgFive(){
      this.$refs.inputFiveRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传身份证正面
    getImgOne(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgOneUrl','desOneImg','imgLoadingOne','identification_front_pic')
      return false;
    },
    //上传身份证反面
    getImgTwo(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgTwoUrl','desTwoImg','imgLoadingTwo','identification_back_pic')
      return false;
    },
     //上传驾驶证主页
    getImgThree(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgThreeUrl','desThreeImg','imgLoadingThree','front_pic',"license")
      return false;
    },
    //上传驾驶证副页
    getImgFour(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgFourUrl','desFourImg','imgLoadingfour','subpage_pic',"license")
      return false;
    },
    //上传上传从业资格证
    getImgFive(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgFiveUrl','desFiveImg','imgLoadingfive','pic',"qualification")
      return false;
    },
    // 判断文件上传类型大小
    uploadType(file,imgShow,desImg,loading,uploadimg,subObj){
      const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$message.warning("上传图片只能是 JPG/JPEG/PNG/GIF 格式!")
        return false
      }
      if (!isLt2M) {
        this.$message.warning("上传图片大小不能超过2M")
        return false
      }
      let formData=new FormData();
      formData.append("file",file)
      formData.append("type",'DRIVER')
      this.$http.companyApi.uploadImg(formData)
      .then(res => {
        this.imgLoading[loading]=true
        if(res.status == 201){
          console.log(res);
          this.$message.success("上传成功")
          this.imgLoading[loading]=false
          if(subObj==undefined || subObj == null){
            this.driversData[uploadimg]=res.data
          }else if(subObj=='license'){
            this.driversData.driver_license[uploadimg]=res.data
          }else{
            this.driversData.driver_qualification[uploadimg]=res.data
          }
          // 
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
          const ImgBase64 = reader.result;
          // 实现预览，实际是拿到图片的base64数据去挂在到图片的src上
          this.imgUpload[imgShow]=ImgBase64
          this.desImg[desImg]=false
        };

          // this.driversData.identification_front_pic=res.data
        }
      }).catch(err => {
        this.$message.error("上传失败")
      })
      
      return false
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.removeItem("driverInfo")
    sessionStorage.removeItem("driverId")
    this.$store.commit('lookType', '');
    sessionStorage.removeItem("lookType")
    next()
  }
}

</script>

<style scoped>
.detailMain .el-card{
  margin-bottom: 24px;
}
.titlebox{
  padding: 16px 24px;
}
.titlebox span{
  display: inline-block;
  padding: 0 11px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: rgba(250, 101, 0, 0.1);
  border-radius: 4px;
  transform: skew(-10deg);
}
.titlebox span i{
  font-size: 14px;
  color: #FA6500;
  display: block;
  transform: skew(10deg);
}
.radiolist{
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}
.radiolist .el-radio{
  height: 40px;
  line-height: 40px;
}
.radioDate{
  display: flex;
}
.uploadBox{
  width:343px;
  height:217px;
  border: 1px dashed #BFC4D3;
  border-radius: 4px;
  padding: 8px;
  position: relative;
}
.uploadBox:hover .previewOne{
  display: flex;
  transition: all .35s;  
}
.uploadBox input{
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  z-index: 1;
  opacity: 0;
}
.uploadBox .uploadImg{
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  opacity: 1;
  z-index: 0;
}
.uploadBox .uploadImg img{
  width: 100%;
  object-fit: fill;
  width: 100%;
  height: 100%;
}
.uploadBox .desText{
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  text-align: center;
}
.uploadBox .desText img{
  width: 60px;
  height: 60px;
  margin: 29px auto 0 auto;
}
.uploadBox .desText h3{
  color: #171717;
  font-size: 16px;
}
.uploadBox .desText span{
  color: #716E6E;
  font-size: 12px;
  display: block;
  line-height:20px;
}
.uploadBox .previewOne{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  color: #fff;
  display: none;
  transition: all .35s;  
}
.uploadBox .previewOne span{
  cursor: pointer;
}

.reviewInfo .tip{
  font-size:12px;
  color: #F5222D;

}
.reviewInfo p span{
  color: #181C27;
  margin-right: 5px;
  display: inline-block;
}

.reviewInfo p.text{
  margin-top: 10px;
}
.reviewInfo p.text i{
  font-size: 12px;
  color: #fff;
  background: #51D25A;
  padding: 2px 9px;
  border-radius: 4px;
  display: inline-block;
}
</style>